<template>
  <section class="flex flex-1 justify-center items-center flex-wrap">
    <div class="login-circle" />
    <el-form ref="ruleFormRef" :model="loginForm" :rules="loginRules"
      class="animate__animated animate__fadeIn login-form">
      <el-row :gutter="20">
        <el-col :span="24" class="text-center">
          <el-image :src="LOGO" class="w-24 h-24" />
        </el-col>
      </el-row>
      <el-form-item prop="userName">
        <el-input v-model="loginForm.userName" type="text" size="large" auto-complete="off" placeholder="用户名">
          <template #prefix>
            <el-icon class="el-input__icon"><i-ep-UserFilled /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="mobile">
        <el-input v-model="loginForm.mobile" type="text" size="large" auto-complete="off" placeholder="手机账号">
          <template #prefix>
            <el-icon class="el-input__icon"><i-ep-User /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" placeholder="密码">
          <template #prefix>
            <el-icon class="el-input__icon"><i-ep-Lock /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="rePassword">
        <el-input v-model="loginForm.rePassword" type="password" size="large" auto-complete="off" placeholder="验证密码">
          <template #prefix>
            <el-icon class="el-input__icon"><i-ep-Lock /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="loginForm.code" size="large" auto-complete="off" placeholder="验证码" style="width: 55%">
          <template #prefix>
            <el-icon class="el-input__icon"><i-ep-Promotion /></el-icon>
          </template>
        </el-input>
        <div class="login-code flex flex-1 justify-end">
          <div v-html="codeUrl" @click="getCode" class="login-code-img"></div>
        </div>
      </el-form-item>
      <el-form-item style="width: 100%">
        <el-button :loading="loading" size="large" style="width: 100%; background: #409eff; color: #fff"
          @click.prevent="handleLogin(ruleFormRef)">
          <span v-if="!loading">注 册</span>
          <span v-else>注 册 中...</span>
        </el-button>
      </el-form-item>
    </el-form>
    <el-image :src="Register" />
  </section>
</template>

<script lang="ts" setup>
import UserService from "@/api/UserService";
import Register from "@/assets/img/register.svg";
import LOGO from "./../../assets/img/favicon.png";
import type { FormInstance, FormRules } from "element-plus";

const router = useRouter();

const loginForm = ref({
  userName: "",
  mobile: "",
  password: "",
  rePassword: "",
  code: "",
  uuid: "",
});

const loginRules = {
  userName: [{ required: true, trigger: "blur", message: "请输入您的用户名" }],
  mobile: [{ required: true, trigger: "blur", message: "请输入您的手机账号" }],
  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
  rePassword: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
  code: [{ required: true, trigger: "change", message: "请输入验证码" }],
};

const codeUrl = ref("");
const ruleFormRef = ref<FormInstance>();
const loading = ref(false);

const handleLogin = async (ruleFormRef: FormInstance | undefined) => {
  const result = await ruleFormRef?.validate().catch(e => { });
  if (!result) return;
  if (loading.value) return;
  loading.value = true;
  const [err, res] = await UserService.register(loginForm.value);
  loading.value = false;
  if (err) {
    return Utils.Modal().msgError(err);
  }
  router.replace("/login");
  setTimeout(() => {
    ruleFormRef?.resetFields()
  }, 500)
}

const getCode = async () => {
  const [err, res] = await UserService.getLoginCode();
  if (err) return Utils.Modal().msgError(err);
  const { data, text } = res.data || {};
  codeUrl.value = data;
  loginForm.value.uuid = text;
}

getCode();
</script>

<style lang="scss" scoped>
.login-circle {
  background: #409eff;
  width: 1500px;
  height: 2000px;
  border-radius: 50%;
  position: fixed;
  top: -500px;
  right: -400px;
  z-index: 0;
}

.login-form {
  border-radius: 6px;
  height: 500px;
  background: #ffffff;
  width: 350px;
  padding: 25px 25px 5px 25px;
  box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.32);
  z-index: 99;
  margin: 50px auto 0 auto;

  .el-input {
    height: 40px;

    input {
      height: 40px;
    }
  }
}
</style>
